import React from 'react';
import DatePicker from 'react-mobile-datepicker';
import moment from 'moment';
import {appname} from '../config';
import * as global from '../global';
import {getCurrentMonth,formatNumber,saveAppData} from '../utils/tools';

export default class HomeHeader extends React.Component
{
	constructor(props)
	{
		super(props);
		this.state = {
			isOpen: false
		}
		this.onOpen = () =>
		{
			this.setState({
				isOpen: true
			});
		}
		this.onCancel = () =>
		{
			this.setState({
				isOpen: false
			});
		}
		this.title = moment().format('YYYY年MM月');
		this.onSelect = (date) =>
		{
            let month = moment(date).format('YYYY-MM');
            this.setState({
				isOpen: false
			});
			this.title = moment(date).format('YYYY年MM月');
            this.props.onSelect(month);
			global.appdata.selected_month = month;
			saveAppData();
        }
	}
	render()
	{
		const {data,month} = this.props;
		let date = month.split('-');
		return (
			<div className="home-wrapper">
				<div className="home-top">
					<div className="home-title">
						<span>{data.title}</span>
						<img src="img/menu-time.png" onClick={this.onOpen}/>
					</div>
					<div className="home-totle">
						<p className="totle-num">{formatNumber(data.total)}</p>
						<p className="totle-name">资金结余</p>
					</div>
					<table className="home-totle2">
						<tbody>
							<tr>
								<th className="income-num">{formatNumber(data.income)}</th>
								<th className="pay-num">{formatNumber(data.outlay)}</th>
							</tr>
							<tr>
								<td className="income-name">收入</td>
								<td className="pay-name">支出</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div className="time-wrapper">
					<table className="time-row">
						<tbody>
							<tr>
								<th className="time-name1"></th>
								<th className="time-name2">{date[0]}年{date[1]}月</th>
								<th className="time-name3" onClick={this.onOpen}>月份选择</th>
								<th className="time-img"><img src="img/detail-img.png" /></th>
							</tr>
						</tbody>
					</table>
				</div>
				<DatePicker
					isOpen={this.state.isOpen}
					dateFormat={['YYYY','MM']}
					onSelect={this.onSelect}
					onCancel={this.onCancel}
					max={new Date(global.appdata.endTime) }
					value={new Date(global.appdata.selected_month)}
					/>
			</div>
		);
	}
}